<template>
  <div class="flexBox">
    <div ref="refFlexBox" :class="data.className">
      <slot />
    </div>
  </div>
</template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
const refFlexBox = ref();
const data = reactive({
  flexWidth: 0,
  className: 'flex-4-12',
});
const props = withDefaults(
  defineProps<{
    minWidth?: number;
    isAuto?: boolean;
    margin?: number;
    list?: number;
  }>(),
  {
    minWidth: 320,
    margin: 12,
    list: 4,
  },
);

//窗口变化
proxy.$useResize(() => {
  const _refFlexBox: any = refFlexBox.value;
  if (_refFlexBox) {
    const clientWidth = _refFlexBox.clientWidth;
    const _listNume = proxy.$getEvenColumnCount(clientWidth, props.minWidth, 1)
    const _list = _listNume <= props.list ? _listNume : props.list
    data.className = `flexList-${_list}-${props.margin || props.margin === 0 ? props.margin : 12}`;
  }
})
</script>
<style scoped>
.flexBox {
  display: block;
  overflow: hidden;
}
</style>
